import React, { useState, useEffect } from 'react';
import { CkValue, ck_empty, obj_empty, obj_str, IkSelect, IkInput, useCheck, useForm, PanelTitle, useCmd,
    for_obj, BtSwitch, obj_bool, CurTip, get_num, MainView, WaitUmd, Btn, Ret, loc } from 'sui';
import { ck_num, urlWork } from 'nui';
import { Title } from '../ctl/base';
import { get_uid } from '../cmd/base';
import { ck_label_plc } from '../cmd/ck';

const HandTm = ({ umd, hreturn, data, cur_plc }) => {
    const [value, setValue] = useState();
    const [db_save, dbSave] = useState(false);
    const form = useForm(setValue);
    const [opck, opCk, hcheck] = useCheck();
    const wait = useCmd(null, "hand");

    useEffect(() => {
        const cur = umd.cur;

        if (obj_empty(cur)) {
            return;
        }

        const cmd = {
            id: obj_str(cur, "id"),
            name: obj_str(cur, "name"),
            active: obj_str(cur, "active") === "true" ? "active" : "disable",
            time: obj_str(cur, "time"),
        };

        dbSave(obj_bool(cur, "db_save"));
        setValue(cmd);
    }, [umd.cur]);

    const ckdes = {
        id: loc("jkid"),
    };

    const hdone = () => {
        const ck = {
            id: v => ck_label_plc(v, ckdes, "id", data),
            name: v => ck_empty(v, loc("jkms")),
            active: v => ck_empty(v, loc("cmd_120")),
            time: v => ck_num(v, loc("mg_158")),
        };

        if (!form.hcheck(ck, value)) {
            return;
        }

        wait.startWait();

        const cur = umd.cur;
        const plc_id = obj_str(cur_plc, "id");

        const cmd = {};

        if (cur) {
            for_obj(cur, (k, v) => cmd[k] = v);
        }

        const cmd_val = {
            id: obj_str(value, "id"),
            plc: plc_id,
            name: obj_str(value, "name"),
            active: value.active === "active" ? true : false,
            time: get_num(value, "time"),
            db_save: db_save,
            tp: "timer",
        };

        for_obj(cmd_val, (k, v) => cmd[k] = v);

        const fin = umd.fin;

        if (fin === "copy") {
            cmd["uid"] = get_uid(null, plc_id, data);
        }
        else {
            cmd["uid"] = get_uid(cur, plc_id, data);
        }

        let url = "config/update";

        if (fin === "copy" || !cur) {
            url = "config/add";
        }

        urlWork(null, url, {mod: "it", v: [cmd]},
            r => {
                wait.endWait();
                hreturn(r, "timer");
            }, e => wait.setWrong(loc("xgsb")));
    };

    const lst_active = [
        {id: "active", des: loc("jkqy")},
        {id: "disable", des: loc("cmd_123")},
    ];

    const Right = () => {
        const hret = () => {
            if (window.confirm(loc("cmd_124"))) {
                hreturn(null, null);
            }
        };

        return (
            <div className="inline-flex">
                <Btn name="done" className="mr-4" color="green" hcmd={() => hcheck(value, ckdes, hdone)}>{loc("cmd_125")}</Btn>
                <Ret hcmd={hret}/>
            </div>
        );
    };

    const Left = () => {
        const cur = umd.cur;
        if (cur) {
            return <CurTip label={obj_str(cur_plc, "name")} cur={loc("mg_270")}>{`${obj_str(cur, "name")} ( ${obj_str(cur, "id")} )`}</CurTip>;
        }

        return <CurTip label={obj_str(cur_plc, "name")} cur={loc("mg_270")}/>;
    };

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Right/>} cl="gray"/>
            <div className="flex flex-col ml-4">
                <div className="inline-flex">
                    <IkInput className="mr-4" label={ckdes.id} name="id" form={form} value={value} mg="dense"/>
                    <IkInput className="mr-4" label={loc("jkms")} name="name" form={form} value={value} mg="dense"/>
                    <IkSelect className="mr-4" label={loc("cmd_120")} name="active" form={form} value={value} lst={lst_active} mg="dense"/>
                </div>
                <Title msg={loc("zw_55")}/>
                <div className="inline-flex items-center">
                    <IkInput className="mr-4" label={loc("mg_158")} name="time" form={form} value={value} mg="dense"/>
                </div>
                <Title msg={loc("cmd_97")}>
                    <BtSwitch checked={db_save} hcmd={v => dbSave(v)}>{loc("cmd_95")}</BtSwitch>
                </Title>
            </div>
            <WaitUmd umd={wait}/>
            <CkValue setOpen={opCk} open={opck} value={value} des={ckdes} setValue={setValue} hcmd={hdone}/>
        </MainView>
    );
};

export {HandTm};
